<script lang="ts">
import Vue from 'vue'
import AudioCacheUtil from '@/utils/AudioCacheUtil.js'

export default Vue.extend({
  name: 'AudioPlayback',
  props: {
    fullSpell: {
      type: String,
      default: "don't know"
    },
    lang: {
      type: String,
      default: 'en'
    }
  },
  data() {
    return {
      playing: false
    }
  },
  methods: {
    async handleClick() {
      try {
        this.playing = true
        AudioCacheUtil.play(this.fullSpell, this.lang)
      } finally {
        this.playing = false
      }
    }
  }
})
</script>

<template>
  <div>
    <img v-if="!playing" style="cursor: pointer" @click="handleClick" src="@/assets/speaker.svg" alt="speaker"/>
    <div v-else class="audio-wave">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
    </div>
  </div>
</template>

<style scoped lang="scss">

.audio-wave {
  display: flex;
  align-items: flex-end;
  height: 19.23px;
  width: 16px;
  gap: 4px;
}

.bar {
  width: 4px;
  background-color: #409EFF; /* 蓝色可自定义 */
  animation: wave 1s infinite ease-in-out;
  border-radius: 2px;
}

.bar1 {
  animation-delay: 0s;
}

.bar2 {
  animation-delay: 0.2s;
}

.bar3 {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%, 100% {
    height: 10%;
  }
  50% {
    height: 100%;
  }
}

</style>
